<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>借书系统</title>
    <!-- 引入 layui.css -->
    <link href="layui/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
    <!--引入图标库-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
    <!--引入图标库-->
    <link rel="stylesheet" href="elementUI/elementCSS.css"/>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/xiangqing.css">
    <script src="js/jquery.min.js"></script>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            color: #333;
            margin: 0;
            padding: 0;
        }

        h1, h2 {
            color: #4CAF50;
        }

        section {
            margin-bottom: 20px;
        }

        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            margin: 5px 0;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }

        button:hover {
            background-color: #45a049;
        }

        input[type="text"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0 20px 0;
            box-sizing: border-box;
            font-size: 16px;
        }

        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        .navbar {
            background-color: #000000;
            padding: 15px;
        }

        .nav-container a,
        .navbar a {
            color: white;
            font-weight: bold;
            text-decoration: none;
        }

        .nav-links {
            list-style-type: none;
            display: flex;
            justify-content: space-around;
        }

        .nav-links li {
            display: inline;
        }

        .footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px 0;
        }

        .footer a {
            color: #4CAF50;
            text-decoration: none;
        }

        .footer-column {
            width: 30%;
            display: inline-block;
            vertical-align: top;
            padding: 0 15px;
        }

        .footer-bottom {
            border-top: 1px solid #444;
            padding-top: 10px;
            margin-top: 10px;
        }

        .content-wrapper {
            display: flex;
            justify-content: space-between;
        }

        .sidebar, .main-content {
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background: white;
            margin: 10px;
        }

        .main-content {
            width: 70%;
        }

        .sidebar {
            width: 28%;
            background: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .search-bar {
            margin-bottom: 10px;
        }

        .chart-container {
            width: 100%;
            height: 400px;
        }

        .el-pagination__jump, .el-table .el-table__header {
            position: sticky;
            top: 0;
            z-index: 1;
            background: white;
        }
    </style>
</head>
<body>
<div id="app">
    <!--头部-->
    <nav class="navbar">
        <div class="nav-container" style="width: 100%;position: relative;">
            <a href="book.html" class="brand"><i class="bi bi-house-door"></i> 首页</a>
            <ul class="nav-links">
                <li><a href="#"><i class="bi bi-clipboard-data"></i> 我的订单</a></li>
                <li><a href="gouwuche.html"><i class="bi bi-cart"></i> 我的购物车</a></li>
                <li><a href="myborrow.html"><i class="bi bi-journal-check"></i> 借书记录</a></li>
                <li><a href="#"><i class="bi bi-heart"></i> 我的收藏</a></li>
                <li><a href="gonggao.html"><i class="bi bi-megaphone"></i> 系统公告(5)</a></li>
                <li><a href="wenda.html"><i class="bi bi-chat-text"></i> 问答(5)</a></li>
                <li style="margin-left: 100px;">
                    <img @click="show_alter_info" style="width: 32px;cursor: pointer;" :src="user.profile" alt="">
                </li>
                <li><a href="zhuye.html"><i class="bi bi-person"></i> 主页</a></li>
                <li @click="logout"><i class="bi bi-box-arrow-right"></i> 退出登录</li>
            </ul>
        </div>
    </nav>
    <!--头部end-->

    <div>
        <div class="content-wrapper">
            <div class="sidebar">
                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-warning icon"></i> 数据统计</div>
                    <div class="layui-card-body">
                        <div id="chart" class="chart-container"></div>
                    </div>
                </div>
            </div>
            <div class="main-content">
                <section class="borrow-record">
                    <h2>借书记录</h2>
                    <div class="search-bar">
                        <input type="text" placeholder="搜索书籍..." v-model="searchQuery">
                        <button @click="performSearch">搜索</button>
                    </div>
                    <el-table :data="filteredTableData" border style="width: 100%" :row-class-name="tableRowClassName" height="360">
                        <el-table-column prop="id" label="序号" width="80"></el-table-column>
                        <el-table-column prop="date" label="借书日期" width="180"></el-table-column>
                        <el-table-column prop="name" label="姓名" width="100"></el-table-column>
                        <el-table-column prop="bookname" label="书名" width="180"></el-table-column>
                        <el-table-column prop="bookid" label="书籍编号" width="100"></el-table-column>
                        <el-table-column prop="Duedate" label="应还日期" width="150"></el-table-column>
                        <el-table-column prop="returndate" label="实际还日期" width="120"></el-table-column>
                        <el-table-column prop="status" label="借书状态" width="80"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini">编辑</el-button>
                                <el-button size="mini" type="danger">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div style="text-align: right; margin-top: 10px;">
                        <el-pagination
                                background
                                layout="prev, pager, next"
                                :total="total"
                                v-model:current-page="currentPage"
                                :page-size="pageSize"
                                @current-change="handlePageChange">
                        </el-pagination>
                    </div>
                </section>
            </div>
        </div>
        <section class="notice">
            <h2>注意事项</h2>
            <p>1. 最大可借图书数量为5本，请合理安排借阅计划。</p>
            <p>2. 逾期未还将会影响账户状态并产生罚金。</p>
        </section>
    </div>

    <!-- 底部页脚 -->
    <footer class="footer">
        <div class="footer-content">
            <!-- 第一列 -->
            <div class="footer-column">
                <h3>公司信息</h3>
                <ul>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">团队</a></li>
                    <li><a href="#">联系</a></li>
                </ul>
            </div>
            <!-- 第二列 -->
            <div class="footer-column">
                <h3>帮助中心</h3>
                <ul>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">支持</a></li>
                    <li><a href="#">隐私政策</a></li>
                    <li><a href="#">条款和条件</a></li>
                </ul>
            </div>
            <!-- 第三列 -->
            <div class="footer-column">
                <h3>关注我们</h3>
                <p>在社交媒体上关注我们</p>
                <a href="#"><img src="https://image.flaticon.com/icons/svg/733/733547.svg" alt="Facebook" width="24"></a>
                <a href="#"><img src="https://image.flaticon.com/icons/svg/733/733579.svg" alt="Twitter" width="24"></a>
                <a href="#"><img src="https://image.flaticon.com/icons/svg/733/733558.svg" alt="Instagram" width="24"></a>
            </div>
        </div>
        <div class="footer-bottom">
            &copy; 2023 MyCompany. 保留所有权利。
        </div>
    </footer>
</div>

<script src="layui/layui.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="js/vue@2.js"></script>
<!-- 引入 Axios 库 -->
<script src="js/axios.min.js"></script>
<script src="elementUI/elementJS.js"></script>
<script src="js/data.js"></script>
<script src="js/pulblicfuntion.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                //用于展示用户信息
                user: {},
                searchQuery: '',
                currentPage: 1,
                pageSize: 10,
                tableData:[
                    {
                        id: 1, //借书编号
                        date: '2016-05-02', //借书日期
                        name: '王小虎', //借书人姓名
                        bookname: "西游记", //书名
                        bookid: "2021", //书籍编号
                        Duedate: "2016-06-02", //应还日期
                        returndate: "2016-06-01", //实际还日期,如果没有实际还日期，则显示--
                        status: '已归还' //借书状态
                    },
                    {
                        id: 2, //借书编号
                        date: '2017-03-15', //借书日期
                        name: '李四', //借书人姓名
                        bookname: "红楼梦", //书名
                        bookid: "2022", //书籍编号
                        Duedate: "2017-04-15", //应还日期
                        returndate: "--", //实际还日期,如果没有实际还日期，则显示--
                        status: '未归还' //借书状态
                    },
                    {
                        id: 3, //借书编号
                        date: '2018-06-20', //借书日期
                        name: '张三', //借书人姓名
                        bookname: "三国演义", //书名
                        bookid: "2023", //书籍编号
                        Duedate: "2018-07-20", //应还日期
                        returndate: "2018-07-18", //实际还日期,如果没有实际还日期，则显示--
                        status: '已归还' //借书状态
                    },
                    {
                        id: 4, //借书编号
                        date: '2019-11-05', //借书日期
                        name: '赵六', //借书人姓名
                        bookname: "水浒传", //书名
                        bookid: "2024", //书籍编号
                        Duedate: "2019-12-05", //应还日期
                        returndate: "--", //实际还日期,如果没有实际还日期，则显示--
                        status: '未归还' //借书状态
                    },
                    {
                        id: 5, //借书编号
                        date: '2020-01-10', //借书日期
                        name: '王五', //借书人姓名
                        bookname: "金瓶梅", //书名
                        bookid: "2025", //书籍编号
                        Duedate: "2020-02-10", //应还日期
                        returndate: "2020-02-09", //实际还日期,如果没有实际还日期，则显示--
                        status: '已归还' //借书状态
                    },
                    {
                        id: 6, //借书编号
                        date: '2021-08-15', //借书日期
                        name: '林七', //借书人姓名
                        bookname: "射雕英雄传", //书名
                        bookid: "2026", //书籍编号
                        Duedate: "2021-09-15", //应还日期
                        returndate: "--", //实际还日期,如果没有实际还日期，则显示--
                        status: '未归还' //借书状态
                    },
                    {
                        id: 7, //借书编号
                        date: '2021-09-01', //借书日期
                        name: '周八', //借书人姓名
                        bookname: "神雕侠侣", //书名
                        bookid: "2027", //书籍编号
                        Duedate: "2021-10-01", //应还日期
                        returndate: "2021-09-30", //实际还日期,如果没有实际还日期，则显示--
                        status: '已归还' //借书状态
                    },
                    {
                        id: 8, //借书编号
                        date: '2022-05-10', //借书日期
                        name: '王九', //借书人姓名
                        bookname: "倚天屠龙记", //书名
                        bookid: "2028", //书籍编号
                        Duedate: "2022-06-10", //应还日期
                        returndate: "--", //实际还日期,如果没有实际还日期，则显示--
                        status: '未归还' //借书状态
                    },
                    {
                        id: 9, //借书编号
                        date: '2022-07-20', //借书日期
                        name: '陈十', //借书人姓名
                        bookname: "笑傲江湖", //书名
                        bookid: "2029", //书籍编号
                        Duedate: "2022-08-20", //应还日期
                        returndate: "--", //实际还日期,如果没有实际还日期，则显示--
                        status: '未归还' //借书状态
                    },
                    {
                        id: 10, //借书编号
                        date: '2023-02-28', //借书日期
                        name: '李十一', //借书人姓名
                        bookname: "鹿鼎记", //书名
                        bookid: "2030", //书籍编号
                        Duedate: "2023-03-28", //应还日期
                        returndate: "2023-03-27", //实际还日期,如果没有实际还日期，则显示--
                        status: '已归还' //借书状态
                    }
                ]
            };
        },
        computed: {
            filteredTableData() {
                let filteredData = this.tableData;
                if (this.searchQuery) {
                    filteredData = filteredData.filter(item =>
                        item.bookname.includes(this.searchQuery) ||
                        item.name.includes(this.searchQuery)
                    );
                }
                return filteredData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
            },
            total() {
                return this.tableData.length;
            }
        },
        created() {
            // 读取登录用户信息
            axios.get(urlluodeng + '/user/getLoginUser').then((response) => {
                if (!response.data.result) {
                    alert(response.data.msg);
                    window.location.href = 'login.html';
                } else {
                    this.user = response.data.userData;
                }
            });
        },
        methods: {
            tableRowClassName({ row, rowIndex }) {
                if (row.status === '已归还') {
                    return 'success-row';
                } else if (row.status === '未归还') {
                    return 'warning-row';
                }
                return '';
            },
            handlePageChange(val) {
                this.currentPage = val;
            },
            renderChart() {
                var myChart = echarts.init(document.getElementById('chart'));

                var returnedBooksCount = this.tableData.filter(item => item.status === '已归还').length;
                var notReturnedBooksCount = this.tableData.filter(item => item.status === '未归还').length;

                var option = {
                    title: {
                        text: '借书状态统计',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },

                    series: [
                        {
                            name: '借书状态',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                { value: returnedBooksCount, name: '已归还' },
                                { value: notReturnedBooksCount, name: '未归还' }
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                myChart.setOption(option);
            },
            performSearch() {
                this.currentPage = 1; // 重置到第一页
            },
            show_alter_info() {
                // 执行显示用户信息的逻辑
            },
            logout() {
                // 执行退出登录的逻辑
            }
        },
        mounted() {
            this.renderChart();
        }
    });
</script>
</body>
</html>
